import * as React from 'react'
import {Layer} from './Layer'
import {tool} from './tool'

interface IProps extends React.HTMLProps<HTMLElement> {
	ref?:string,
}
interface IState {}

export class View extends React.Component<IProps, IState> {
	static defaultProps = {};
	private style:React.CSSProperties = {}
	private rest:any;
	constructor(props: IProps){
		super(props)
		this.state = {}
		this.setStyle(this.props)
	}
	componentWillMount(){}
	render(){
		return (
			<Layer style = {this.style} {...this.rest}>{this.props.children}</Layer>
		)
	}
	componentDidMount(){}
	componentWillReceiveProps(nextProps:IProps){
		console.log(nextProps)
		this.setState(nextProps)
	}
	shouldComponentUpdate(){ return true }
	componentWillUpdate(){}
	componentWillUnmount(){}
	setStyle(props: IProps){
		console.log('recevie props')
		const {style, ...rest} = props;
		this.rest = rest;
		if(!tool.pc) {
			this.style = {
				'-webkit-tap-highlight-color': 'transparent',
				'-webkit-touch-callout': 'none',
				'-webkit-user-select': 'none',
				'-moz-use-select': 'none',
				'-ms-user-select': 'none',
				overflow:'hidden',
				WebkitScrollbar: 'width:0',
				color:'#fff'
			}
		}
		this.style = tool.assign(this.style, style)
	}
}